<template>
	<div style="font-family: '微软雅黑';">
		<div class="head">
			<a @click="$router.push({path: '/'})" class="return"></a>
			<span>视频页面</span>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-swipe @change="onChange" ref="swipe">
					<van-swipe-item>
						<div class="video-box">
							<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)"></video-player>
						</div>
					</van-swipe-item>
					<van-swipe-item>
						<img src="../assets/images/banner.png" style="width: 100%;height: 100%;padding-top: 5px;" />
					</van-swipe-item>
					<van-swipe-item>
						<img src="../assets/images/banner.png" style="width: 100%;height: 100%;padding-top: 5px;" />
					</van-swipe-item>
					<van-swipe-item>
						<img src="../assets/images/banner.png" style="width: 100%;height: 100%;padding-top: 5px;" />
					</van-swipe-item>
				</van-swipe>
				<div style="position: relative;">
					<div style="position:absolute;margin: -50px 0px;left: 35%;">
						<span :class="current == 0 ? 'videoClass' : 'videoClass2'" @click="video">视频</span>
						<span :class="current != 0 ? 'videoClass' : 'videoClass2'" @click="picture">图片</span>
					</div>
					<div v-if="current != 0" style="position:absolute;right: 0;margin: -50px 10px;background: white;padding: 0px 10px;border-radius: 10px;opacity: 0.5;">
						<span style="opacity: 1;color: black;">{{ current }}/3</span>
					</div>
				</div>
				<div style="padding: 0px 10px;color: black;position: relative;">
					<div style="background: white;margin-top: -22px;border-radius: 5px;padding: 15px 10px;box-shadow: 0 0 10px rgb(134,134,134,1);">
						<div style="font-size: 16px;font-weight: 550;">汤臣一品一栋二号楼70平方</div>
						<van-row style="font-size: 13px;padding-top: 10px;">
							<van-col span="24">
								<span>参加抽奖起抽金额:</span>
								<span style="color: #21af47;">100 USDT</span>
							</van-col>
						</van-row>
						<van-progress :percentage="35" color="#21af47" style="margin: 30px 0px;margin-bottom: 20px;" />
						<div style="color: red;margin-bottom: 10px;font-size: 13px;">
							<span>剩余时间:</span>
							<span>25天15小时</span>
						</div>
						<van-row style="font-size: 13px;padding-top: 10px;text-align: center;color: #7d7e80;">
							<van-col span="8">
								已筹金额
							</van-col>
							<van-col span="8">
								众筹目标
							</van-col>
							<van-col span="8">
								参加人数
							</van-col>
						</van-row>
						<van-row style="font-size: 13px;padding-top: 10px;text-align: center;">
							<van-col span="8">
								400 USDT
							</van-col>
							<van-col span="8">
								40000 USDT
							</van-col>
							<van-col span="8">
								50 人
							</van-col>
						</van-row>
					</div>
				</div>
				<div style="color: black;padding: 10px 20px;font-size: 12px;color: #7d7e80;text-align: center;letter-spacing:1px;line-height: 20px;">
					此众筹啊哈哈你说话；就哈哈就覅无痕建行卡发孔间距和爱好获取获获取太远了涵盖了各后期维护去
				</div>
				<div style="color: black;padding: 20px 10px;">
					<div style="font-size: 16px;font-weight: 550;padding-bottom: 5px;">项目介绍</div>
					<div style="font-size: 12px;color: #7d7e80;letter-spacing:1px;line-height: 20px;padding-bottom: 40px;">
						此众筹啊哈哈你说话；就哈哈就覅无痕建行卡发孔间距和爱好获取获获取太远了涵盖了各后期维护去此众筹啊哈哈你说话；就哈哈就覅无痕建行卡发孔间距和爱好获取获获取太远了涵盖了各后期维护去此众筹啊哈哈你说话；就哈哈就覅无痕建行卡发孔间距和爱好获取获获取太远了涵盖了各后期维护去此众筹啊哈哈你说话；就哈哈就覅无痕建行卡发孔间距和爱好获取获获取太远了涵盖了各后期维护去
						<img src="../assets/images/banner.png" style="width: 100%;height: 100%;padding-top: 5px;" />
					</div>
				</div>
				<van-submit-bar button-text="立即参与" @submit="onSubmit" class="sure">
					<div style="color: #7d7e80;text-align: center;padding-right: 10%;" @click="isSc">
						<van-icon name="star-o" size="22" v-if="sc == 0" />
						<van-icon name="star" size="22" v-if="sc == 1"/>
						<div>收藏</div>
					</div>
				</van-submit-bar>
			</div>
		</div>
	</div>
</template>

<script>
	import { dateFormat } from 'vux';
	export default {
		data() {
			return {
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					muted: false, // 默认情况下将会消除任何音频。
					loop: false, // 导致视频一结束就重新开始。
					preload: 'false', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: "",
						src: require('../assets/test.mp4') //视频url地址
					}],
					poster: require('../assets/images/banner.png'), // 你的封面地址
					notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: true,
						durationDisplay: true,
						remainingTimeDisplay: false,
						fullscreenToggle: true // 全屏按钮
					}
				},
				current: 0,
				sc: 0
			}
		},
		mounted() {

		},
		methods: {
			onPlayerPlay() {
				console.log("开始播放");
			},
			onPlayerPause() {
				console.log("暂停播放");
			},
			onChange(index) {
				this.current = index;
			},
			video() {
				// 点击视频，切换到第一页的视频轮播页面
				this.current = 0;
				this.$refs.swipe.swipeTo(0);
			},
			picture() {
				// 点击图片，切换到第二页的图片轮播页面
				this.current = 1;
				this.$refs.swipe.swipeTo(1);
			},
			onSubmit() { // 立即参与的点击事件
				this.$toast('功能正在开发中');
			},
			isSc() { // 收藏功能
				if(this.sc == 0){
					this.sc = 1;
					this.$toast('收藏成功');
				}else if(this.sc == 1){
					this.sc = 0;
					this.$toast('取消收藏');
				}
			}
		},
		filters: {
			dateFormat
		}
	}
</script>

<style scoped lang="less">
	.overlay {
		background: white;
	}
	
	.head {
		background: white;
		color: black;
	}
	
	.head .return:after {
		border-color: #000;
	}
	
	/deep/ .video-js .vjs-big-play-button {
		border-radius: 50%;
		height: 2em;
		width: 2em;
		top: 35%;
		left: 42%;
	}
	
	/deep/ .video-js .vjs-big-play-button {
		line-height: 1.9em;
	}
	
	/deep/ .vjs-poster {
		background-color: white;
	}
	
	/deep/ .vjs-has-started .vjs-control-bar {
		top: 0px;
	}
	
	/deep/ .van-swipe__indicators {
		display: none;
	}
	
	.videoClass {
		padding: 2px 10px;
		margin-right: 5px;
		margin-left: 5px;
		background: #21af47;
		border-radius: 10px;
		font-size: 12px;
	}
	
	.videoClass2 {
		padding: 2px 10px;
		margin-right: 5px;
		margin-left: 5px;
		background: white;
		opacity: 0.5;
		color: black;
		border-radius: 10px;
		font-size: 12px;
	}
	
	.sure .van-button--danger {
		background-color: #21af47 !important;
    	border: 1px solid #21af47 !important;
	}
	
	.sure .van-submit-bar__button {
		width: 70%;
	}
</style>